<template>
	<view class="order-container">
		<u-navbar :border-bottom="false" :is-back="false" title-color="#FFFFFF" title="订单管理" :background="nav_background">
			<!-- 使用u-tabs替换原有的tabs-wrapper -->
		</u-navbar>
		
		<!-- 添加u-tabs组件替换原来的自定义tabs -->
		<view class="main-tabs-container">
			<u-tabs
				:list="list"
				:current="tab_current"
				@change="tabChange"
				active-color="#FB5904"
				inactive-color="#62738E"
				bar-width="40"
				:show-bar="true"
				bar-height="6"
			></u-tabs>
		</view>
		
		<view class="order-content">
			<view v-if="tab_current === 0 && $accessCheck($Access['orderQuery'])">
				<OrderList :customerData="customerData" :shopData="shopData" :paymentData="paymentData"
					:customerTypeData="customerTypeData" :staffData="staffData"></OrderList>
			</view>
			<view v-else-if="tab_current === 1 && $accessCheck($Access['ReturnWarehousingOrder'])">
				<OrderReturn :shopData="shopData" :staffData="staffData"></OrderReturn>
			</view>
			<view v-else class="empty-view"><u-empty text="暂无权限" mode="order"></u-empty></view>
		</view>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
import OrderReturn from './OrderReturn.vue';
import OrderList from './OrderList.vue';
export default {
	components: {
		OrderReturn,
		OrderList
	},
	data() {
		return {
			tabbar_current: 3,
			nav_background: {
				backgroundColor: '#FB5904'
			},
			tab_current: 0, // 页面current 0，订单，1，退货单
			list: [
				{
					name: '订单管理'
				},
				{
					name: '退货单据'
				}
			],
			customerData: '',
			shopData: '',
			paymentData: '',
			staffData: '',
			customerTypeData: '',
			search_data: {}
		};
	},
	onLoad() {
		if (!this.$store.state.hasLogin) {
			this.logout();
		}
	},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		tabChange(index) {
			this.tab_current = index;
			// 检查权限
			if (index === 0 && !this.$accessCheck(this.$Access['orderQuery'])) {
				this.$u.toast('暂无权限');
				return;
			}
			if (index === 1 && !this.$accessCheck(this.$Access['ReturnWarehousingOrder'])) {
				this.$u.toast('暂无权限');
				return;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.order-container {
	background-color: #f5f7fa;
	min-height: 100vh;
}

.main-tabs-container {
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	margin-top: 10rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-content {
	padding-top: 10rpx;
}

.empty-view {
	padding-top: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
